<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单详情</title>
    <link href="../css/index.css" rel="stylesheet">
    <link href="../css/common.css" rel="stylesheet">
    <link href="../css/order/order_detail.css" rel="stylesheet">
</head>
<body>
    <div>
        <!--=======================================1. 标题================================================-->
        <div class="header">
            <div class="head-top">
                <div class="w1180 top-linkbox">
                    <div class="top-left">
                        <span><a class="size-color" href="">登录</a></span>
                        <span>|</span>
                        <span><a class="size-color" href="">免费注册</a></span>
                        <span>|</span>
                        <span><a href="">我的小橘</a></span>
                    </div>
                    <div class="top-right">
                        <span><a href="">帮助中心</a></span>
                        <span>|</span>
                        <span><a href="">网址导航</a></span>
                        <span>|</span>
                        <span><a href="">English</a></span>
                        <span>|</span>
                        <span>400-888-6608</span>
                        <span>|</span>
                        <span><a href="">微信</a></span>
                    </div>
                </div>
            </div>
            <div class="head-bottom">
                <div class="w1180">
                    <a href="" class="logo"></a>
                    <div class="nav">
                        <ul class="nav-wrap">
                            <li><a href="../index.html">首页</a></li>
                            <li><a href="">自驾租车</a></li>
                            <li><a href="">车型查询</a></li>
                            <li><a href="">营业网点</a></li>
                            <li><a href="">政企服务</a></li>
                            <li><a href="">接送服务</a></li>
                            <li><a href="">精彩活动</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
<!--        --------------------位置提示信息------------------------->
        <div class="w1180">
            <div id="crumbs">
                <div class="crumbs-bd">
                    当前位置:
                    <a href="">我的小橘</a>
                    >
                    <a href="">订单管理</a>
                    > 订单详情
                </div>
            </div>
            <div id = "content">
                <div class="content-bd">
                    <div class="col-sub">
                        <dl class="sub-nav">
                            <dt>我的订单</dt>
                            <dd><a href="">订单管理</a></dd>
                            <dt>我的资产</dt>
                            <dd><a href="">账户余额</a></dd>
                            <dd><a href="">我的优惠券</a></dd>
                            <dd><a href="">我的收藏</a></dd>
                            <dt>个人中心</dt>
                            <dd><a href="">用户信息</a></dd>
                            <dd><a href="">申请注销账户</a></dd>
                        </dl>
                    </div>
                    <div class="col-main">
<!--                        订单基本信息-->
                        <div class="order-status status-orange">
                            <h2>待支付</h2>
                            <div class="order-info">
                                订单号：<a href="">1200279378</a> &nbsp;&nbsp;
                                <span>|</span>&nbsp;&nbsp;  租车人：<a href="">李威</a> &nbsp;&nbsp;
                                <span>|</span>&nbsp;&nbsp;支付方式：在线支付
                            </div>
                        </div>
                        <div class="mod car-info">
                            <div class="ui-bfc-hd car-info-img">
                                <div class="car-img">
                                    <img src="../images/dzly.png">
                                    <p class="p1">租期：</p>
                                    <span>2</span>
                                    <p>天</p>
                                </div>
                            </div>
                            <div class="ui-bfc-bd car-info-detail">
                                <h1>
                                    大众朗逸/自动/三厢/1.6L
                                    <span>自动/1.6L/三厢/5座</span>
                                </h1>
                                <table>
                                    <tbody>
                                    <tr>
                                        <th colspan="2">取车地点</th>
                                        <th colspan="2">还车地点</th>
                                    </tr>
                                    <tr>
                                        <td class="left">取车门店：</td>
                                        <td class="cell-cnt">
                                            上海
                                            八万人体育场店
                                        </td>
                                        <td class="left">还车门店：</td>
                                        <td width="40%" class="cell-cnt">
                                            上海
                                            八万人体育场店
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>取车时间：</td>
                                        <td class="cell-cnt" id="J_PickupTime">2021-09-23 09:00</td>
                                        <td>还车时间：</td>
                                        <td class="cell-cnt" id="J_DropoffTime">2021-09-25 09:00</td>
                                    </tr>
                                    <tr>
                                        <td>取车地点：</td>
                                        <td class="cell-cnt">上海市徐汇区斜土路2899号甲（光启文化广场内）</td>
                                        <td>还车地点：</td>
                                        <td class="cell-cnt">上海市徐汇区斜土路2899号甲（光启文化广场内）</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="J_priceDetail">
                            <div class="mod price-info">
                                <div class="hd">
                                    <h2>费用明细</h2>
                                </div>
                                <div class="bd">
                                    <div class="price-info-item">
                                        <div class="price-info-item-hd">
                                            <h3>
                                                车辆租赁费及门店服务费 <span class="insurance-count">(原价：172元，折扣优惠：0元)</span>
                                            </h3>
                                            <p>
                                                <span class="ui-rmb">¥</span>
                                                <span class="ui-rmb">172</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="price-info-item">
                                        <div class="price-info-item-hd">
                                            <h3>基本保障服务费<span class="insurance-count">(原价：100元，折扣优惠：0元)</span>
                                            </h3>
                                            <p><span class="ui-rmb">¥</span>100</p>
                                        </div>
                                    </div>
                                    <div class="price-info-item">
                                        <div class="price-info-item-hd service-cost">
                                            <h3>其它服务费<span class="insurance-count"></span></h3>
                                            <p>
                                                <span class="ui-rmb">¥</span>20
                                            </p>
                                        </div>
                                    </div>
                                    <div class="price-info-item">
                                        <ul class="added-list-detail">
                                            <!--手续费及其它费用-->
                                            <li>
                                                <p class="tit">手续费--------------------------------------------------------------------------------------------------------------------------------------
                                                </p>
                                                <p class="cnt">
                                                    <span class="ui-rmb">¥</span>20

                                                </p>
                                            </li>
                                            <!--订单增值服务价格明细-->
                                            <!--订单的其他费用明细-->
                                        </ul>
                                    </div>
                                    <div class="price-info-item">
                                        <div class="price-info-item-hd">
                                            <h3>优惠折扣</h3>
                                            <p>
                                                <span class="ui-rmb">¥</span>-<span>0</span>
                                            </p>
                                        </div>
                                        <div class="dashed-border db-gray-normal"></div>
                                    </div>
                                    <div class="price-totalbox">
                                        <div class="price-totalintro">
                                            <div class="price-total">
                                                总计：<span><em>¥</em>292</span>
                                            </div>
                                        </div>
                                        <div class="price-totalinfo">
                                            <div class="pay-wait">
                                                待支付：<span class="pricenum"><em>¥</em>292</span>
                                            </div>

                                            <div class="pay-already">
                                                已支付：<span class="pricenum"><em>¥</em>0</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="order-remark">
                                <div class="hd">
                                    <input type="checkbox" disabled="disabled">
                                    <span>备注</span>
                                    <a id="remarkUpdate" href="javascript:void(0)" data-type="1">修改&gt;&gt;</a>
                                    <p id="J_Remark"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="footer-box clear_float">
            <div class="footer-left">
                <p>
                    <a href="" >关于小橘</a>
                    |
                    <a href="" >移动客户端</a>
                    |
                    <a href="" >帮助中心</a>
                    |
                    <a href="" >建议专区</a>
                    |
                    <a href="" >联系我们</a>
                    |
                    <a href="" >友情链接</a>
                    | &nbsp;投诉通道：400-821-1608 &nbsp;
                </p>
                <p>
                    Copyright © 2007 - 2021 上海一嗨信息技术服务有限公司
                    <a href="" >ICP证：沪B2-20140130</a>
                </p>
            </div>
            <div class="footer-right">
                <a href="">
                    <img src="../images/footer_right_first.png">
                </a>
                <a href="">
                    <img src="../images/footer_right_second.png">
                </a>
                <a href="">
                    <img src="../images/footer_right_third.png">
                </a>
                <a href="">
                    <img src="../images/footer_right_forth.png">
                </a>
            </div>
        </div>
    </div>
</body>
</html>